iT邦幫忙

2021 iThome 鐵人賽

DAY 10
0
Modern Web

33歲轉職者的前端筆記系列 第 10

33歲轉職者的前端筆記-DAY 10 一些網頁切版技巧的小筆記-Part 1

  • 分享至 

  • xImage
  •  

今天把之前上課筆記整理一下

希望能幫助新手更快上手喔

網頁編輯器

除了常用的 vs clde外不只一個編輯器,如:ATOM、Sublime等等都大受歡迎及喜愛。

css 小筆記

  • CSS要做樣式設定要選擇所需要的標籤

  • 設定長度寬度距設定單位,如px

  • 寫標籤快速的方法如:h1{重要的標題}*2會等於
    <h1>重要的標題</h1> <h1>重要的標題</h1>

  • 同一個標籤設定css會同時被設定,如果不想改變全部的那就要在標籤加「分類」,也就是class,後面可以自已取名稱。
    <h1 class="important-title">重要的標題</h1>

    1.只要看到 class 就要想到點「.」這個符號
    2.寫法:

.important-title{
    color: red;
    text-align:center;
}
  • 空格的功能是為了區別不同的class,如:

<h1 class="important-title t-center">

  • 文字陰影:x y blur color:左右 上下 模糊程度 顏色
    text-shadow: 2px 2px 0px black;

小小新觀念

css 可以把它當作工具箱,可以先寫要的css 在去html標籤給class,範例code如下:

<h1 class="important-title">重要靠左的標題</h1>
<h1 class="important-title t-center  t-shadow" >重要置中的標題</h1>
<h1 class="important-title t-right">重要靠右的標題</h1>
.important-title {
    color: orange;
    /* text-align: center; */
    font-size: 42px;
}

.t-shadow{
   /* 文字陰影: x y blur color; */
   text-shadow: 0px 3px 6px rgba(0, 0, 0, 0.392);
}

.t-center{
    text-align: center;
}
.t-right{
    text-align:right;
}

插入圖片及寫法注意事項

src= 圖片來源 alt=圖片敘述,圖片發生問題才會出現替代文字
  • 插入圖片方法:
  • 改變圖片寬度:
    <img width="300px" src="./images/image1.jpg" alt="">
    只要改變圖片寬度,高度會自動調整,盡量別調整高度會影響原本圖片的比例會失真

反之,改變圖片高度,寬度也會自動調整

img 不會換行,除非空間不夠

filter= 濾鏡
filter: grayscale(0%);灰階化

滑鼠游標點到此圖的時候改變樣式:
g-100:hover {}


上一篇
33歲轉職者的前端筆記 DAY 9 陣列資料的處理方法
下一篇
33歲轉職者的前端筆記-DAY 11 一些網頁切版技巧的小筆記-Part 2
系列文
33歲轉職者的前端筆記30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言